<template>
	<view>
		<u-mask :show="wxmodal" @click="modalclose">
			<view class="wxbox" @click.stop>
				<view class="head">
					<image class="avatar" :src="userinfo.head_300 | formatImage"></image>
					<view class="name">{{userinfo.name}}</view>
				</view>
				<view class="lab"> <text>TA的联系方式</text> </view>
				<view class="cell flex-bt">
					<view class="left flex">
						<view class="label">微信</view>
						<view class="value">{{userinfo.wxcount}}</view>
					</view>
					<view class="right" @click="copy(userinfo.wxcount)">复制</view>
				</view>
				<view class="cell">
					<view class="left flex">
						<view class="label">介绍</view>
						<view class="value">{{ userinfo.self_slogan || '这个人很懒，没有填写个人介绍~'}}</view>
					</view>
				</view>
			</view>
		</u-mask>
	</view>
</template>

<script>
	export default {
		name:"chatmodal",
		props:{
			userinfo:{},
			wxmodal: false
		},
		data() {
			return {
				
			};
		},
		methods:{
			copy(val) {
				uni.setClipboardData({
					data: val
				});
			},
			modalclose(){
				this.$emit('modalclose')
			}
		}
	}
</script>

<style lang="scss">

		.wxbox {
			background: rgb(42, 41, 49);
			font-size: 12px;
			position: absolute;
			margin: 0 3rem;
			width: calc(100% - 6rem);
			border-radius: 8px;
			padding: 0.4rem;
			top: 30%;
			color: #fff;

			.head {
				position: relative;
				top: -1.9rem;
				width: 100%;
				display: flex;
				align-items: center;
				flex-direction: column;

				.avatar {
					width: 3rem;
					height: 3rem;
					border-radius: 50%;
					border: 1px solid #f1f1f1;
					margin-bottom: 8rpx;
				}
			}

			.lab {
				text-align: center;
				color: #ccc;
				display: flex;
				align-items: center;
				padding: 0 30rpx;
				position: relative;
				top: -20rpx;

				&::after {
					content: '';
					flex: 1;
					height: 2rpx;
					background-color: #ccc;
				}

				&::before {
					content: '';
					flex: 1;
					height: 2rpx;
					background-color: #ccc;
				}

				text {
					padding: 0 8rpx;
				}
			}

			.cell {
				padding: 20rpx 30rpx;
				color: #A87B38;

				.left {
					.label {
						color: #ccc;
						margin-right: 30rpx;
					}
				}
			}
		}
</style>
